<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue.global.js"></script>
  </head>
  <body>
    <!-- 
        自定义指令,当需要对dom节点进行操作时,可以通过自定义指令实现
        1.注册
            Vue2中通过Vue.directive("指令名称",{配置对象})注册
            Vue3通过app(注册的Vue对象).directive注册
            区别不大
        2.使用
            与预设指令类似,通过v-指令名称调用,可以用=传入binding参数
        3.生命周期(钩子函数)
            Vue2中分为5个阶段
                bind 第一次绑定到元素
                inserted 插入父节点时调用(父节点存在但不一定上树)
                update 在由于组件数据更新导致指令的值发生变化时调用。但是在这里还没有更新 DOM
                componentUpdated 指令所在的组件及其子组件全部更新后才会调用。此时 DOM 已经更新完毕
                unbind 只调用一次，在指令从元素上解绑时调用。在这里进行一些清理操作，比如解绑事件监听器。
            Vue3中分为6个阶段
                beforeMount：与组件中的同名钩子函数类似，会在指令挂载前调用。
                mounted：在指令第一次绑定到元素并且元素插入父节点时调用。与 Vue2 的 bind 钩子类似，但是此时元素已经插入到 DOM 中，可以进行 DOM 操作。
                beforeUpdate：指令所在的组件已经完成了一次更新，并且指令及其绑定的值也发生了变化，但是此时还没有更新 DOM。
                updated：在指令所在的组件及其子组件全部更新后，才会调用该钩子函数。此时 DOM 已经更新完毕。
                beforeUnmount：在指令所在的组件卸载之前调用，可以在这里执行一些清理操作。
                unmounted：指令所在的组件卸载后调用，可以做最终的清理工作。
            4.钩子函数传参
                第一个参数el:代表执行指令的dom节点
                第二个参数binding:通常用来获取指令信息,可以通过binding.value获取
                    -->
    <div id="box">
      <h1 v-hello>{{name}}</h1>
      <ul>
        <li v-change="{name:11,age:22}">111</li>
      </ul>
    </div>

    <script>
      let obj = {
        data() {
          return {
            name: "张三",
          };
        },
      };
      let app = Vue.createApp(obj);
      // 自定义指令
      app.directive("hello", {
        mounted() {
          console.log("hello");
        },
      });
      // 自定义指令
      app.directive("change", {
        mounted(el, binding) {
          el.style.color = "red";
          console.log(binding.value);
        },
      });
      app.mount("#box");
    </script>
  </body>
</html>
